import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import styles from './index.module.less';
import SearchBar from '../common/searchBar';
import ListTab from '../common/listTab';
import ProjectItem from '../../components/ProjectItem';

@inject(({ projectState, commonState }) => ({ projectState, commonState }))
@observer
class ProjectList extends Component {

    state = {
        activeRecid: null,
        activeStatus: 0
    }

    componentWillMount() {
        document.addEventListener('projectListListener', this.projectListListener);
        const { projectState: { getList }, projectid } = this.props;
        getList({ searchkey: '' }, (list) => {
            // 其它页面跳转过来做的处理
            if (projectid) {
                this.handleJumpToActiveItem(projectid, list);
            }
        });
    }

    componentWillReceiveProps(nextProps) {
        const { projectid } = this.props;
        if (nextProps.projectid && projectid !== nextProps.projectid) {
            this.handleJumpToActiveItem(nextProps.projectid, nextProps.projectState.projectList);
        }
    }

    componentDidUpdate() {
        // 列表跟新完成后，把当前activeItem滚动到列表顶部
        const nodeId = this.needScrollIntoViewNodeId;
        const viewNode = this[`node-${nodeId}`]
        if (nodeId && viewNode) {
            viewNode.scrollIntoView();
            this.needScrollIntoViewNodeId = false; // 屏蔽了每次渲染都会把activeItem滚动到列表顶部
        }
    }

    componentWillUnmount() {
        document.removeEventListener('projectListListener', this.projectListListener);
    }

    projectListListener = (event) => {
        const { activeStatus } = event.detail;
        this.setState({ activeStatus });
    }

    handleJumpToActiveItem = (projectid, list) => {
        const t = list.find(t => t.recid === projectid);
        if (t) {
            this.setState({ activeStatus: t.iscomplete ? 1 : 0 });
            this.viewDetail(t);
            // 用于滚动activeItem到列表顶部
            this.needScrollIntoViewNodeId = projectid;
        }
    }

    viewDetail = ({ recid: projectid }) => {
        this.setState({ activeRecid: projectid });
        this.props.commonState.setStateValue('sideOpen', false);
        this.props.projectState.getDetail({ projectid });
    }

    onChange = (activeStatus) => () => {
        this.setState({ activeStatus });
    }

    render() {
        const { projectList0, projectList1 } = this.props.projectState;
        const { activeRecid, activeStatus } = this.state;
        const projectList = activeStatus ? projectList1 : projectList0;
        return (
            <>
                <SearchBar stateKey={'projectState'} add />
                <ListTab onChange={this.onChange} activeStatus={activeStatus} />
                <div className={styles.listContent}>
                    {projectList.map((v, i) => (
                        <ProjectItem
                            innerRef={d => this[`node-${v.recid}`] = d}
                            key={v.recid}
                            data={v}
                            activeRecid={activeRecid}
                            onClick={() => this.viewDetail(v, i)}
                        />
                    ))}
                </div>
            </>
        );
    }
}

export default ProjectList